<template>
  <div class="office-cashier">
    <!-- 收款账户 -->
    <a-row>
      <a-col span='12'>
        <span class="name">收款账户：</span>
        <span>北京凯迪克格兰云天大酒店有限公司</span> 
      </a-col>
    </a-row>
    <!-- 商品信息 -->
    <a-row>
      <a-col span='12'>
        <span class="name">商品信息：</span>
        <span class="name-tip">09-21 舒适双人房*3</span>
        <a-button @click="showModal">新增/修改</a-button>
      </a-col>
    </a-row>
    <!-- 应收金额 -->
    <a-row>
      <a-col span='12'>
        <span class="name">应收金额：</span>
        <a-input v-if="isUpPrice" style="width:250px" placeholder="请输入应收金额" />
        <span v-if="!isUpPrice">¥198</span>
        <span v-if="!isUpPrice" class="price-tip" @click="handlePrice">金额有误？请点击修改</span>
      </a-col>
    </a-row>
    <!-- 备注信息 -->
    <a-row>
      <a-col span='12' style="display:flex;align-items:center;">
        <span class="name">备注信息：</span>
        <a-textarea style="width:400px" placeholder="如需输入备注信息，请点击输入" autosize />
      </a-col>
      <a-col span='12' style="text-align:right">
        <span class="paidup">实收金额：<span>¥198 元</span></span>
      </a-col>
    </a-row>
    <!-- 收款类型 -->
    <a-card style="border-radius:5px;">
      <div>收款类型</div>
      <a-row class="pay-style">
        <a-col>
          <a-radio-group @change="onChange1" v-model="value">
            <a-radio :value="1">
              <img src="../../../assets/imgs/m_cost.png" alt="">
              <span>普通收款</span> 
            </a-radio>
            <a-radio :value="2">
              <img src="../../../assets/imgs/m_cost.png" alt="">
              <span>预授权收款</span> 
            </a-radio>
            <a-radio :value="3">
              <img src="../../../assets/imgs/m_cost.png" alt="">
              <span>远程预授权</span> 
            </a-radio>
          </a-radio-group>
          <div></div>
        </a-col>
      </a-row>
      <!-- 付款账户 -->
      <div style="margin-top:17px;">{{value === 3? '短信预览' : '付款账户'}}</div>
      <div class="sms" v-if="value === 3">
        <div class="preview">【HA酒店平台】尊敬的客人您好，您将预订09-21舒适双人房3间，预授权金额：198.80元，请点击下方链接完成资金授权（https:qr.alipay.com/aax***）链接10分钟有效，北京凯迪克格兰云天大酒店欢迎您入住。</div>
        <div>
          <span style="color:#666666;">收信人手机号：</span>
          <a-input style="width:250px" />
        </div>
      </div>
      <div class="account" v-else>
        <div> <img src="../../../assets/imgs/m_cost.png" alt=""> </div>
        <div> <input placeholder="扫条形码/输入条形码" /> </div>
        <div> <a-button type="primary">清空</a-button> </div>
      </div>
    </a-card>
    <!-- 立即收银 -->
    <div>
      <div style="width:90px;margin:50px auto">
        <a-button type="primary">立即收银</a-button>
      </div>
    </div>
    <!-- 商品信息弹窗 -->
    <a-modal 
      title="商品信息"
      v-model="visible"
      @ok="handleOk"
      width="800px"
      cancelText="取消"
      okText="确定"
    >
      <a-row style="padding-bottom:65px">
        <a-col span="10">
          <a-date-picker
            format="YYYY-MM-DD HH:mm:ss"
            :disabledDate="disabledDate"
            :disabledTime="disabledDateTime"
            :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"

          />
        </a-col>
        <a-col span="14">
          <a-transfer
            :dataSource="mockData"
            :titles="['Source', 'Target']"
            :targetKeys="targetKeys"
            :selectedKeys="selectedKeys"
            @change="handleChange"
            @selectChange="handleSelectChange"
            @scroll="handleScroll"
            :render="item=>item.title"
            :disabled="disabled"
          />
          <a-switch
            unCheckedChildren="disabled"
            checkedChildren="disabled"
            :checked="disabled"
            @change="handleDisable"
            style="margin-top: 16px"
          />
        </a-col>
      </a-row>
     
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  data () {
    const mockData = [];
    for (let i = 0; i < 20; i++) {
      mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        disabled: i % 3 < 1,
      });
    }

    const oriTargetKeys = mockData
            .filter(item => +item.key % 3 > 1)
            .map(item => item.key);
  return {
    value: 1,
    // 修改价格状态
    isUpPrice: false,
    // 商品查看修改弹窗
    visible: false,
    mockData,
    targetKeys: oriTargetKeys,
    selectedKeys: ['1', '4'],
    disabled: false,
  }
  },
  methods: {
    onChange1 (e) {
      window.window.console.log('radio1 checked', e.target.value)
    },
    // 修改金额
    handlePrice() {
      this.isUpPrice = true;
    },
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      window.window.console.log(e);
      this.visible = false
    },
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },

    disabledDate(current) {
      // Can not select days before today and today
      return current && current < moment().endOf('day');
    },

    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },

    disabledRangeTime(_, type) {
      if (type === 'start') {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56],
      };
    },
    // 穿梭框
     handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys
      window.console.log('direction:', direction, moveKeys);

    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]


    },
    handleScroll(direction, e) {
      window.console.log('direction:', direction);
      window.console.log('target:', e.target);
    },
    handleDisable(disabled) {
      this.disabled = disabled
    },
  },
}
</script>
<style lang="less" scoped>
.ant-row {
  margin: 20px 0;
}
/deep/ .ant-radio-wrapper {
  box-shadow: 0 1px 5px 0 rgba(102, 102, 102, 0.25);
  padding:18px 15px;
  border-radius: 5px;
  margin-right: 15px;
}
.office-cashier {
  font-size: 16px;
  span {
    color: #333333;
  }
  .name {
    display: inline-block;
    width: 90px;
    color: #666666;
    &-tip {
      padding: 7px 10px;
      box-sizing: border-box;
      border-radius: 3px;
      color: #358CF0;
      font-size: 14px;
      background: #D9ECFF;
      margin-right: 5px;
    }
  }
  .price-tip {
    color: #358CF0;
    font-size: 14px;
    margin-left: 21px;
  }
  .paidup {
    margin-right: 40px;
    color: #666666;
    font-size: 20px;
    span {
      color: #FF2C49;
      font-size: 35px;
    }
  }
  .pay-style {
    font-size: 16px;
    padding-bottom: 20px;
    margin-bottom: 0; 
    border-bottom: 1px dotted #E7E7E7;
    img {
      width: 24px;
      height: 24px;
      margin: 0 10px 0 30px;
      vertical-align: bottom;
    }
  }
  .account {
    display: flex;
    background: #F4F4F4;
    height: 60px;
    align-items: center;
    width: 425px;
    border-radius: 5px;
    margin-top: 18px;
    img {
      width: 25px;
      height: 29px;
      margin: 0 10px 0 20px;
    }
    input {
      width:290px;
      border:none;
      background:#F4F4F4;
      outline:none;
    }
  }
  .sms {
    .preview {
      width: 800px;
      margin: 15px 0 37px 0;
      color: #333333;
    }
  }
}

</style>